<template>
  <basic-container class="bonus">
    <div v-if="show">
      <!--搜索栏目-->
      <div class="search-form">
        <el-form :inline="true" :model="searchForm" >
          <el-form-item label="负责机构">
            <el-select v-model="searchForm.bonusItemDeptId" placeholder="负责机构" @change="changeBonusItemDeptId">
              <el-option
                v-for="item in bonusItemDeptIdOptions"
                :key="item.deptId"
                :label="item.name"
                :value="item.deptId">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="奖金项">
            <el-input v-model="searchForm.bonusItemName" placeholder="奖金项" clearable></el-input>
          </el-form-item>
          <el-form-item label="ECC奖金编码">
            <el-input v-model="searchForm.eccCode" placeholder="奖金编码" clearable></el-input>
          </el-form-item>
        </el-form>
        <div>
          <el-button type="primary" @click="handleSearch">查询</el-button>
        </div>
      </div>
      <div>
        <div class="menu-left">
          <el-button type="primary" @click="add">新增</el-button>
          <el-button type="danger" plain @click="del(true)">删除</el-button>
          <el-button type="primary" plain @click="downLoad">模版下载</el-button>
          <!--上传文件-->
          <el-upload
            action="/admin/sys-file/upload"
            accept=".xlsx, .xls"
            :headers="headers"
            class="inline-block"
            :before-upload="beforeAvatarUpload"
            :on-success="handleUploadSuccess"
            :show-file-list="false">
            <el-button type="primary" plain @click="exportData" class="mg-l10">导入</el-button>
          </el-upload>
        </div>
        <el-table :data="tableData" v-loading="loading" border  @selection-change="handleSelectionChange" :height="`calc(100vh - 280px )`">
          <el-table-column
            type="selection"
            width="45">
          </el-table-column>
          <el-table-column
            width="60px"
            prop=""
            label="序号"
            align="center"
          >
            <template slot-scope="scope">
              {{(page.currentPage - 1) * page.pageSize + scope.$index + 1}}
            </template>
          </el-table-column>
          <el-table-column
            prop="bonusItemName"
            label="奖金项名称"
            align="left"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="eccCode"
            label="ECC奖金编号"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="bonusItemCode"
            label="系统内奖金项编号"
            align="center"
            header-align="center"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="bonusItemDeptName"
            label="负责机构"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="bonusItemScope"
            label="奖金项范围"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="bonusItemDescription"
            label="奖金项说明"
            align="left"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="childFlag"
            label="分解状态"
            align="center"
            show-overflow-tooltip
          >
            <template slot-scope="{row}">
                {{row.childFlag == '1' ? '已分解' : '未分解'}}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="160px" align="center">
            <template slot-scope="scope">
              <el-button type="text" @click="edit(scope.row)">编辑</el-button>
              <el-button type="text" class="delete_btn" @click="del(false,scope.row)">删除</el-button>
              <el-button type="text" @click="decomposeHandle(scope.row)">分解</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!--分页-->
        <div class="avue-crud__pagination">
          <el-pagination
            @size-change="sizeChangeHandle"
            @current-change="currentChangeHandle"
            :current-page="page.currentPage"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="page.pageSize"
            :total="page.total"
            background
            layout="total, sizes, prev, pager, next, jumper"
          >
          </el-pagination>
        </div>
      </div>
    </div>
    <!--拆分-->
    <decompose ref="decomposeRef" v-if="!show" @close="close" :bonusItemDeptIdOptions="bonusItemDeptIdOptions"></decompose>
    <!--新增-->
    <itemForm ref="itemFormRef" :bonusItemDeptIdOptions="bonusItemDeptIdOptions" :bonusItemsScopeOptions="bonusItemsScopeOptions" @refresh="refresh"></itemForm>

  </basic-container>
</template>

<script>
import itemForm from "@/views/bonusmanage/items/itemForm";
import decompose from '@/views/bonusmanage/items/decompose'
import {getOrg, fetchList, deleteBatch} from '@/api/bonus/items'
import request from "@/router/axios";
import store from "@/store";
export default{
  name:"items",
  components:{
    itemForm,
    decompose
  },
  data() {
    return {
      show:true ,
      loading:false,
      page:{
        total: 0,
        currentPage: 1,
        pageSize: 10
      },
      tableData: [],
      searchForm: {bonusItemDeptId:''},
      bonusItemDeptIdOptions:[],
      bonusItemsScopeOptions:[
        {label:'公共',value:'公共'},
        {label:'私有',value:'私有'}
      ], //奖金范围
      multipleSelection: [],
      ids:[],
      headers: {
        Authorization: 'Bearer ' + store.getters.access_token
      },
    }
  },
  computed: {

  },
  created(){
    //初始化获取二级机构
    this.getOrg() ;
  },
  methods:{
    getOrg(){
      getOrg().then(res => {
        this.bonusItemDeptIdOptions = res.data.data
        this.$set(this.searchForm,'bonusItemDeptId',this.bonusItemDeptIdOptions[0].deptId)
        //获取数据
        this.onLoad() ;
      })
    },
    handleSearch(){
      this.onLoad() ;
    },
    onLoad(){
      this.loading = true ;
      fetchList(Object.assign({
        current: this.page.currentPage,
        size: this.page.pageSize
      },this.searchForm)).then(res=>{
        if (res.data.code == 0){
          this.tableData = res.data.data.records
          this.page.total = res.data.data.total ;
          this.page.currentPage = res.data.data.current ;
        }else{
          this.$message.error(res.data.msg)
        }
        this.loading = false ;
      }).catch(()=>{
        this.loading = false ;
      })
    },
    handleSelectionChange(list){
      this.multipleSelection = list ;
      this.ids = this.multipleSelection.map((ele) => {
         return ele.id
      })
    },
    // 每页数
    sizeChangeHandle(val) {
      this.page.pageSize = val;
      this.page.currentPage = 1;
      this.onLoad() ;
    },
    // 当前页
    currentChangeHandle(val) {
      this.page.currentPage = val;
      this.onLoad() ;
    },
    changeBonusItemDeptId(){
      this.onLoad() ;
    },
    add(){
      this.$refs.itemFormRef.init('add')
    },
    edit(item){
      this.$refs.itemFormRef.init('edit',JSON.parse(JSON.stringify(item)))
    },
    del(batch,item){
      let msg = '' ;
      let ids = ''
      if (batch){ //批量
        msg = '确定删除选中的数据吗?'
        if (this.multipleSelection.length == 0){
          this.$message.error('请勾选要删除的数据')
          return ;
        }
        ids = this.ids.toString() ;
      }else{ //单条
        msg = '确定删除此条数据吗?'
        ids = item.id ;
      }
      this.$confirm(msg, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.loading = true ;
        deleteBatch({ids:ids}).then(res=>{
          this.$message.success('操作成功')
          this.onLoad() ;
          this.loading = false ;
        }).finally(()=>{
          this.loading = false ;
        })
      }).catch(() => {

      });
    },
    decomposeHandle(item){
        this.show = false
        this.$nextTick(()=>{
          this.$refs.decomposeRef.init(item,this.searchForm.bonusItemDeptId) ;
        })
    },
    refresh(){
      this.onLoad() ;
    },
    close(){
      this.show = true ;
    },
    downLoad(){
      alert('下载功能待实现')
      //window.location.href = '../../static/人员奖惩导入.xlsx'
    },
    exportData(){

    },
    //文件上传前
    beforeAvatarUpload() {
      this.uploadLoading = this.$loading({
        lock: true,
        text: '人员数据验证中...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
    },

    //文件上传成功
    handleUploadSuccess(response, file, fileList) {
      if (response.code == 0) {
        request({
          url: '/jiangjin/jiangjingrjcjlb/fileDow/' + response.data.bucketName + '/' + response.data.fileName +
            '/' + this.deptId,
          method: 'get',
        }).then((res) => {
           if (res.data.code == 0){
             let obj = res;
             if (obj) {
               //this.$refs.dataIndex.getDataList(obj, this.deptId); //刷新界面
               this.uploadLoading.close()
             } else {
               this.uploadLoading.close()
               this.$message.error("数据导入错误请联系管理员")
             }
           }else{
             this.uploadLoading.close()
           }
        }).catch(err=>{
            this.uploadLoading.close()
        })

      } else {
        this.$message.error('上传出错：' + response.msg)
        this.uploadLoading.close() ;
      }
    },

  }
}
</script>
<style scoped>

</style>
